import React, { memo } from "react";
import './switch.less'


export default memo(function ({ label, field, value, readonly, onChange }) {
  const id = parseInt(Math.random() * Math.pow(10, 10))
  const __onChange = (value) => {
    console.log(value.target, value.target.value)
    onChange(value, field)
  }

  // console.log('bbbbbbbbbbbbbbbbbbbbbbbb', value)
  return (
    <div className="form-item row flex-center">
      <div className="col-8 form-item-label">
        <label>{ label }</label>
      </div>
      <div className={`col-16 form-item-control ${readonly ? 'readonly' : ''}`}>
        <div className="switch">
          <input
            id={'cmn-toggle-1' + id}
            className="cmn-toggle cmn-toggle-round"
            onChange={__onChange}
            checked={value}
            type="checkbox"
          />
          <label htmlFor={'cmn-toggle-1' + id}/>
        </div>
      </div>
    </div>
  )
})
